﻿<UserControl x:Class="DictationTool.View.MediaPlayerView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:my="clr-namespace:DictationTool.View"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Grid MinWidth="600" MinHeight="80">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border Grid.RowSpan="2" BorderBrush="#FF3C8DC5" BorderThickness="0,2" Margin="0" CornerRadius="0">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0.5" />
                    <GradientStop Color="WhiteSmoke" Offset="0" />
                    <GradientStop Color="LightGray" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>

        <Grid x:Name="mediaPlayerRoot" Grid.Row="0" Margin="5" AllowDrop="True" Drop="Grid_Drop">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ContentControl x:Name="mediaElement" Grid.Row="0" Content="{Binding Path=MediaElement}" MinHeight="5" MaxHeight="300"/>
            <Grid x:Name="seekTo" Grid.Row="1" Background="Transparent" Cursor="Hand">
                <Slider x:Name="positionSlider" 
                        VerticalAlignment="Center" Maximum="{Binding Path=TotalSeconds}"
                        Value="{Binding Path=CurrentValue}" 
                        Visibility="Collapsed"/>
                <Border Height="8" BorderBrush="LightGray" BorderThickness="1" CornerRadius="3">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
                            <GradientStop Color="White" Offset="1"/>
                            <GradientStop Color="LightGray" Offset="0.5"/>
                            <GradientStop Color="White" Offset="0"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border x:Name="process" Height="8" BorderBrush="LightGray" BorderThickness="1,1,0,1" CornerRadius="3" HorizontalAlignment="Left">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
                            <GradientStop Color="White" Offset="1"/>
                            <GradientStop Color="#FF3C8DC5" Offset="0.5"/>
                            <GradientStop Color="White" Offset="0"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Border.Width>
                        <MultiBinding Converter="{StaticResource ResourceKey=ValueToWidth}">
                            <Binding Path="Value" ElementName="positionSlider"/>
                            <Binding Path="Maximum" ElementName="positionSlider"/>
                            <Binding Path="ActualWidth" ElementName="mediaPlayerRoot"/>
                        </MultiBinding>
                    </Border.Width>
                </Border>
                <Border x:Name="seekBtn" Height="10" Width="20" 
                        Margin="-10,0"
                        VerticalAlignment="Center" HorizontalAlignment="Left" 
                        BorderThickness="1" CornerRadius="3" BorderBrush="#FF3C8DC5" RenderTransformOrigin="0,.5">
                    <Border.Background>
                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                            <GradientStop Color="#FFDDDDDD" Offset="0.625"/>
                            <GradientStop Color="#FFDDDDDD" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Border.RenderTransform>
                        <TranslateTransform x:Name="translate" X="{Binding Path=Width, ElementName=process}"/>
                    </Border.RenderTransform>
                </Border>
                <my:LabelContent Label="S" Opacity="{Binding Path=ShowStart, Converter={StaticResource BoolToVisible}}"
                                 RenderTransformOrigin="0.5,0" HorizontalAlignment="Left">
                    <my:LabelContent.RenderTransform>
                        <TranslateTransform>
                            <TranslateTransform.X>
                                <MultiBinding Converter="{StaticResource ResourceKey=TimeSpantoDouble}">
                                    <Binding Path="StartPosition.TotalSeconds"/>
                                    <Binding Path="Maximum" ElementName="positionSlider"/>
                                    <Binding Path="ActualWidth" ElementName="mediaPlayerRoot"/>
                                </MultiBinding>
                            </TranslateTransform.X>
                        </TranslateTransform>
                    </my:LabelContent.RenderTransform>
                </my:LabelContent>
                <my:LabelContent Label="E" Opacity="{Binding Path=ShowEnd, Converter={StaticResource BoolToVisible}}" 
                                 HorizontalAlignment="Left" RenderTransformOrigin="0.5,0">
                    <my:LabelContent.RenderTransform>
                        <TranslateTransform>
                            <TranslateTransform.X>
                                <MultiBinding Converter="{StaticResource ResourceKey=TimeSpantoDouble}">
                                    <Binding Path="EndPosition.TotalSeconds"/>
                                    <Binding Path="Maximum" ElementName="positionSlider"/>
                                    <Binding Path="ActualWidth" ElementName="mediaPlayerRoot"/>
                                </MultiBinding>
                            </TranslateTransform.X>
                        </TranslateTransform>
                    </my:LabelContent.RenderTransform>
                </my:LabelContent>
            </Grid>
        </Grid>
        
        <Grid Grid.Row="1" Margin="0,5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            
            <Grid Grid.Column="0" Grid.RowSpan="2">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <ToggleButton x:Name="playBtn" Width="30" Height="30" Margin="5,0"
                                  IsChecked="{Binding Path=IsPlay, UpdateSourceTrigger=PropertyChanged}"
                                  Command="{Binding Path=PlayPauseCommand, Mode=OneTime}" 
                                  Style="{StaticResource PlayPauseButton}">
                    </ToggleButton>
                    <Button Width="30" Height="30" Margin="5,0"
                            Style="{StaticResource stopButton}"
                            Command="{Binding Path=StopCommand, Mode=OneTime}">
                    </Button>
                    <Button Width="30" Height="30" Margin="5,0" Style="{StaticResource loadButton}" Command="{Binding Path=LoadCommand, Mode=OneTime}" ></Button>
                </StackPanel>
            </Grid>

            <Grid Grid.Column="1" Grid.RowSpan="2">
                <Border CornerRadius="13" BorderBrush="LightGray" Background="White" Width="130" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="1">
                    <Border.Effect>
                        <DropShadowEffect Opacity="0.317" BlurRadius="5" ShadowDepth="2" />
                    </Border.Effect>
                </Border>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent">
                        <TextBlock Text="{Binding Path=CurrentTime}" Foreground="#FF3C8DC5" FontWeight="Bold"/>
                        <TextBlock Text=" / " Foreground="#FF3C8DC5" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Path=TotalTime}" Foreground="#FF3C8DC5" FontWeight="Bold"/>
                    </StackPanel>
            </Grid>

            <Grid Grid.Column="2">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Button Content="S" Width="20" Height="20" Margin="5,0" Command="{Binding Path=StartPointCommand, Mode=OneTime}" ToolTip="Set Start Position"/>
                    <Button Content="R" Width="20" Height="20" Margin="5,0" Command="{Binding Path=EndPointCommand, Mode=OneTime}" ToolTip="Repeat"/>
                    <Button Content="C" Width="20" Height="20" Margin="5,0" Command="{Binding Path=ContinueCommand, Mode=OneTime}" ToolTip="Continue"/>
                </StackPanel>
            </Grid>

            <Grid Grid.Column="3">
                <StackPanel Orientation="Horizontal">
                    <CheckBox x:Name="speaker" Style="{StaticResource Speaker}" Margin="5,0,0,0" IsChecked="{Binding Path=Mute, UpdateSourceTrigger=PropertyChanged}"/>
                    <Slider Width="50" Maximum="1" Value="{Binding Volume, Mode=TwoWay}" IsEnabled="{Binding Path=IsChecked, ElementName=speaker}"/>
                </StackPanel>
            </Grid>

            <Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="2" Margin="5,3,5,0">
                <TextBlock Text="F7 : Pause / Play     F8 : Repeat" Foreground="#FF3C8DC5"/>
            </Grid>
        </Grid>
    </Grid>
</UserControl>
